<template>
    <div id="ency">
         <md-tabs :md-theme="'bottom-bar-orange'" @md-changed="checkNewPosts" class="md-primary" md-alignment="fixed">
            <md-tab id="recommend" md-label="推荐"></md-tab>
            <md-tab id="novel" md-label="小说"></md-tab>
            <md-tab id="picture" md-label="美图"></md-tab>
            <md-tab id="weather" md-label="天气"></md-tab>
        </md-tabs>
        <md-content v-if="!weather" class="md-scrollbar">
          <Recommend v-if="recommend"></Recommend>
          <Picture v-if="picture"></Picture>
        </md-content>
        <Weather v-if="weather"></Weather>
    </div>
</template>
<script>
import Recommend from "./Recommend";
import Picture from "./Picture";
import Weather from "./Weather";
export default {
  name: "ency",
  components: {
    Recommend,
    Picture,
    Weather
  },
  data() {
    return {
      recommend: false,
      picture: false,
      weather:false
    };
  },
  mounted() {
    this.recommend = true;
  },
  methods: {
    checkNewPosts(activeTab) {
      if (activeTab == "recommend") {
        this.recommend = true;
        this.picture = false;
        this.weather=false;
      } else if (activeTab == "novel") {
        this.recommend = false;
        this.picture = false;
        this.weather=false;
      } else if (activeTab == "picture") {
        this.recommend = false;
        this.picture = true;
        this.weather=false;
      }else if(activeTab=="weather"){
        this.recommend = false;
        this.picture = false;
        this.weather=true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~vue-material/dist/theme/engine";
@include md-register-theme(
  "bottom-bar-orange",
  (
    primary: md-get-palette-color(red, A200),
    accent: md-get-palette-color(red, A200)
  )
);
@import "~vue-material/dist/theme/all";
</style>
<style lang="less" scoped>
.md-scrollbar {
  margin: 10px;
}
@media screen and (max-width: 414px) {
  .md-scrollbar {
    max-height: 564px;
    overflow: auto;
  }
}
@media screen and (max-width: 375px) {
  .md-scrollbar {
    max-height: 494px;
    overflow: auto;
  }
}
@media screen and (max-width: 320px) {
  .md-scrollbar {
    max-height: 395px;
    overflow: auto;
  }
}
</style>